//嵌套路由管理页面
import React from "react";
import { lazy,Suspense } from "react";
//导入antd mobile 模块
import {TabBar} from "antd-mobile-v2";
//导入路由模块react-router-dom v6
import {
  BrowserRouter as Router,
  Route,
  Routes
} from "react-router-dom";
//导入其他页面组件



import HomeIndex from "../Index/index";
// import News from "../News/index"
// import CityList from "../CityList";
// import Myprofile from "../Profile/index";
//导入css样式
import "./index.scss"
//导入功能函数组件：withHook，使用useNavigate，获取路由信息
import withHook from "../../utils/Withhook"


const News=lazy(()=>import("../News/index"))
const CityList=lazy(()=>import("../CityList"))
const Myprofile=lazy(()=>import("../Profile/index"))



//数组：导航资料
const allitem=[
{title:"首页",iconfont:"icon-ind",route_location:"/home"},
{title:"找房",iconfont:"icon-findHouse",route_location:"/home/list"},
{title:"咨询",iconfont:"icon-infom",route_location:"/home/news"},
{title:"我的",iconfont:"icon-my",route_location:"/home/profile"}
]

//类组件：管理页面
class Home extends React.Component{

    //状态
    state = {
      //状态1：当前路由页面路径（默认为首页），从高阶组件的路由函数中获取  
      //用于设置高亮状态的TarBar位置
        selectedTab:this.props.LC.pathname,   
      };

    //函数：从高阶组件获取useNavigate功能
    toPath = (path) => {
        this.props.to(path) 
    }

    //渲染函数1： 用于渲染TabBar中的菜单
    find_item(){
        return(
            allitem.map(item=>
                <TabBar.Item
                title={item.title}//参数：导航标题
                key={item.title}//参数：唯一标识
                icon={<i className={`iconfont ${item.iconfont}`}></i>}//参数：导航图标 默认展示图片
                selectedIcon={<i className={`iconfont ${item.iconfont}`}></i>}//参数：选中后的展示图片
                //高亮当前路由页面对应的导航（若有对应的话，则为ture）（一直在判断）
                selected={this.state.selectedTab === item.route_location}//参数：是否选中（两个路由路径名一样，则表示选中）
                //bar 点击触发，需要自己改变组件 state & selecte={true}
                onPress={() => {
                  this.setState({
                    selectedTab: item.route_location,//单击该导航菜单时， 设置当前路由导航高亮
                  });
                  this.toPath(item.route_location)//在单击事件中，添加路由切换功能，跳转到指定页面页面
                }}    
              ></TabBar.Item>
                ))}

    //生命周期（更新）：判断路由切换前后是否一致，不一致则当前页面对应TarBar位置高亮
    componentDidUpdate(prevProps){
      if(this.props.LC.pathname!=prevProps.LC.pathname){//prevProps当前路由信息
        this.setState({
          selectedTab:this.props.LC.pathname//设置当前需要高亮的TarBar位置
        })}}

    render(){
        return(
        <div className="home">
            {/* 嵌套路由  二级路由设计 */}
            <Suspense fallback={<div className="routeloading">加载中.....</div>}>
            <Routes>
                <Route path="/" element={<HomeIndex/>}></Route>{/* 首页页面 */}
                <Route path="/news" element={<News/>}></Route>{/* 咨询页面（暂空）*/}
                <Route path="/list" element={<CityList/>}></Route>{/* 城市列表页面 */}
                <Route path="/profile" element={<Myprofile/>}></Route>{/* 个人中心页面 */}  
            </Routes>
            </Suspense>
            {/* 导航栏渲染：渲染函数为{this.find_item() */}
            <TabBar
              tintColor="#21b97a"//参数：选中的字体颜色
              noRenderContent={true}//设置不用antdmobile的内容渲染
              barTintColor="white"//参数：tabbar 背景色
            >
            {this.find_item()}
            </TabBar>
      </div>
        )};}
const HighHome= withHook(Home)//高阶组件withHook包装
export default HighHome